import 'package:enjoy_plus/pages/kuan/content.dart';
import 'package:enjoy_plus/providers/kuan_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class KuAnPage extends StatefulWidget {
  const KuAnPage({super.key});

  @override
  State<KuAnPage> createState() => _KuAnPageState();
}

class _KuAnPageState extends State<KuAnPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const KuAnSearchBar(),
      body: Center(
        child: ListView(
          children: [
            KuAnNavBar(),
            KuAnRecommendTopic()
          ],
        ),
      ),
    );
  }
}

//头部搜索栏
class KuAnSearchBar extends StatelessWidget implements PreferredSizeWidget {
  const KuAnSearchBar({super.key});

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.white,
      padding: const EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 12),
      child: Row(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.asset(
              'assets/images/avatar_1.jpg',
              width: 24,
              height: 24,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Container(
              height: 40,
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                children: [
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 8),
                    child: Icon(Icons.search, color: Colors.white),
                  ),
                  Expanded(
                    child: Transform.translate(
                      offset: const Offset(0, -8),
                      child: const TextField(
                        textAlign: TextAlign.start,
                        style: TextStyle(
                            color: Colors.white, fontSize: 14), // 字体颜色为白色，字号小一点
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: '搜索...',
                          hintStyle: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 14),
          const Icon(Icons.more_vert),
          const SizedBox(width: 14),
          const Icon(Icons.more_vert),
          const SizedBox(width: 14),
          const Icon(Icons.more_vert),
        ],
      ),
    );
  }
}

//导航栏
class KuAnNavBar extends StatelessWidget {
  const KuAnNavBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<KuAnProvider>(
      builder: (context, kuanProvider, child) {
        return Container(
          color: Colors.blue,
          padding: const EdgeInsets.only(top: 12, bottom: 12),
          width: double.infinity,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: kuanProvider.navBarData.asMap().entries.map((entry) {
                int idx = entry.key;
                String item = entry.value;
                return GestureDetector(
                  onTap: () {
                    kuanProvider.setCurrentNavIndex(idx);
                  },
                  child: Container(
                    color: kuanProvider.currentNavIndex == idx 
                        ? Colors.green 
                        : Colors.blue,
                    padding: const EdgeInsets.only(
                        left: 16, right: 16, bottom: 2),
                    alignment: Alignment.center,
                    child: Text(
                      item,
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: kuanProvider.currentNavIndex == idx 
                            ? FontWeight.bold 
                            : FontWeight.w600,
                        color: Colors.white
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        );
      },
    );
  }
}

//推荐话题
class KuAnRecommendTopic extends StatelessWidget {
  const KuAnRecommendTopic({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        clipBehavior: Clip.hardEdge,
        child: Column(
          children: [
            Image.network(
                'https://static-o.oss-cn-shenzhen.aliyuncs.com/images/tpbj/ImitatePhotoStyle5.jpg',
                height: 120,
                width: double.infinity,
                fit: BoxFit.fitWidth),
            SizedBox(
              height: 80,
              child: PageView(
                scrollDirection: Axis.horizontal,
                physics: const ClampingScrollPhysics(), // 添加滑动物理效果
                children: [
                  //遍历2次
                  for (int i = 0; i < 2; i++)
                    Container(
                      width: double.infinity,
                      padding: const EdgeInsets.all(12),
                      child: Row(
                        children: [
                          //遍历5次
                          for (int j = 0; j < 5; j++)
                            GestureDetector(
                              onTap: () {
                                Navigator.push(context, MaterialPageRoute(builder: (context) => const KuAnContent()));
                              },
                              child: const Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Icon(Icons.favorite_border),
                                  Text('推荐'),
                                ],
                              ),
                            )
                        ],
                      ),
                    )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
